<template>
 <div>
   <div class="container">
      <div class="handle-box">
          <el-button type="primary" style="padding: 9px 15px;font-size: 12px;float: left;margin-bottom:20px" @click="Add">
            创建教室
          </el-button>
      </div>
      <el-table :data="data" border style="width: 100%">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="教室名称"></el-table-column>
          <el-table-column prop="address" label="教师地址"></el-table-column>
          <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                  <el-button type="text" @click="Edit(scope.$index, scope.row)" size="medium">编辑</el-button>
              </template>
          </el-table-column>
      </el-table>
      <!-- 添加弹框 -->
      <el-dialog title="添加教室" :visible.sync="AddVisible" width="30%">
          <el-form ref="form" :model="Addform" label-width="50px">
            <span style="font-size:16px;margin-bottom:10px;display: block;margin-top:20px">教室名称：</span>
              <el-input v-model="Addform.name"></el-input>
            <span style="font-size:16px;margin-bottom:10px;display: block;margin-top:20px">教室地址：</span>
              <el-input v-model="Addform.address"></el-input>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="AddVisible = false">取 消</el-button>
              <el-button type="primary" @click="AddClassroom">确 定</el-button>
          </span>
      </el-dialog>
      <!-- 编辑弹框 -->
      <el-dialog title="编辑教室" :visible.sync="editVisible" width="30%">
          <el-form ref="form" :model="Editform" label-width="50px">
            <span style="font-size:16px;margin-bottom:10px;display: block;margin-top:20px">教室名称：</span>
              <el-input v-model="Editform.name"></el-input>
            <span style="font-size:16px;margin-bottom:10px;display: block;margin-top:20px">教室地址：</span>
              <el-input v-model="Editform.address"></el-input>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="editVisible = false">取 消</el-button>
              <el-button type="primary" @click="EditClassroom">确 定</el-button>
          </span>
      </el-dialog>
    </div>
 </div>
</template>
<script>
export default {
  data() {
    return {
      tabdata:[],
      editVisible: false,
      AddVisible: false,
      Addform: {
        name: '',
        address: ''
      },
      Editform: {
        name: '',
        address: ''
      },
    };
  },
  created() {
		this.bankAccount();
  },
  computed: {
    data() {
      return this.tabdata.filter(d => {
        return d;
      });
    }
  },
  methods: {
    // 获取机构教室信息
    bankAccount(){
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.$axios({
        method: "post",
        url: "/api/user/xzs/classroom.list.get",
        data: {
          organizationId:organizationId,
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }
        ],
      }).then(res => {
        console.log(res)
        this.tabdata = res.data.data
        console.log(this.tabdata);
        }).catch(err => {

        });
    },
    // 添加教室 弹框
    Add(){
      this.AddVisible = true
    },
    // 添加教室
    AddClassroom(){
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.$axios({
        method: "post",
        url: "/api/user/xzs/classrooms.add",
        data: {
          classroomInfos:[
            {
              name: that.Addform.name,
              address: that.Addform.address,
            },
          ],
          organizationId:organizationId
        }
      }).then(res => {
        console.log(res);
          if(res.data.errorCode == 0){
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success"
            });
            this.AddVisible = false
            location.reload();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 编辑教室
    Edit(index,row){
      this.editVisible = true;
      const item = this.tabdata[index];
      this.Editform = {
          name: item.name,
          id:item.id,
          address: item.address
      }
    },
    // 编辑教室
    EditClassroom(){
      var that = this
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.$axios({
        method: "post",
        url: "/api/user/xzs/classrooms.update",
        data: {
          classroomInfos: [
            {
              name: that.Editform.name,
              address: that.Editform.address,
              id:that.Editform.id
            },
          ],
          organizationId : organizationId
        }
      }).then(res => {
          if(res.data.errorCode == 0){
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success"
            });
            this.editVisible = false
            location.reload();
          }
        })
        .catch(err => {
          console.log(err);
        });
      
    },
  },
  components: {}
};
</script>

<style>

</style>
